<template>
  <div>
    <div class="form-wrap">
      <div class="classify-area">
        <span>检索分类：</span>
        <el-input
          v-model="selected"
          @click.native="openMessage"
          placeholder="请选择"
          disabled
          class="popMsg"
        ></el-input>
      </div>
      <div class="search-area">
        <span>关键词：</span>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          class="searchBox"
          @keyup.enter.native="triggerSearch"
        ></el-input>
        <span class="btn">
          <el-button type="primary" @click="triggerSearch">检索</el-button>
          <el-button @click="resetInput">重置</el-button>
        </span>
        <div class="checkbox" v-if="showCk">
          <el-checkbox v-model="searchInRes">在结果中检索</el-checkbox>
        </div>
      </div>
    </div>
    <MessageBox :messageShow.sync="messageShow" :options="options" />
  </div>
</template>

<script>
import MessageBox from "./MessageBox.vue";
export default {
  props: {
    showCk: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
    },
    keyWords: {
      type: String,
    },
    showLoading: {
      type: Boolean
    },
    showLogo: {
      type: Boolean
    }
  },
  components: {
    MessageBox,
  },
  data() {
    return {
      input: "",
      messageShow: false,
      selected: "",
      selectedObj: [],
      searchInRes: false,
    };
  },
  methods: {
    //开启弹出框
    openMessage() {
      this.messageShow = true;
    },
    //触发检索功能
    triggerSearch() {
      //搜索条件是否为空
      if (this.selectedObj.length > 0 && this.input?this.input.trim():null) {
        this.$emit("search", this.selectedObj, this.input);
        
      } else {
        this.$message({
          type: "warning",
          message: "请选择检索分类和输入关键词",
        });
      }
    },
    //重置输入框内容
    resetInput() {
      this.input = "";
    },
  },
  mounted() {
    //组装字符串显示在input中
    if (this.options) {
      this.selected = this.options.map((item) => item.label).join("，");
      this.selectedObj = this.options;
      this.input = this.keyWords;
    }
    this.$bus.$on("options", (data) => {
      this.selected = data.map((item) => item.label).join("，");
      this.selectedObj = data;
    });
  },
  beforeDestroy() {
    this.$bus.$off("options");
  },
};
</script>

<style lang="scss" scoped>
.popMsg {
  width: 400px;
}
.searchBox {
  width: 400px;
}
::v-deep .popMsg input {
  cursor: pointer !important;
}
.popMsg {
  margin-right: 20px;
}
.form-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.btn {
  margin-left: 20px;
  .el-button {
    width: 157px;
    height: 57px;
    vertical-align: top;
    font-size: 26px;
  }
}
.classify-area,
.search-area {
  flex: 0 0 auto;
  font-size: 30px;
}
.search-area {
  position: relative;
}
.checkbox {
  position: absolute;
  right: 42px;
  padding-top: 10px;
}
.img-wrap {
  position: absolute;
  top: -320px;
  right: calc(50% - 300px);
  width: 600px;
}
.img-wrap > img {
  width: 100%;
}
::v-deep .el-input.is-disabled .el-input__inner, ::v-deep .el-input--medium .el-input__inner {
  height: 57px;
  font-size: 26px;
}
</style>